<template>
  <div class="content_padding">
    <div class="container" style="position: fixed; top: 0; left: 0;">
      <span class="deviceTitle">{{ title }}</span>
      <div>
        <el-button type="text" icon="icon iconfont iconfanhui" @click="returnPreviousPage">返回</el-button>
        <el-button type="text" icon="el-icon-position" @click="submitFormInfo">提交</el-button>
      </div>
    </div>

    <div class="device_info">
      <div class="title">基本信息</div>
      <div class="basic_info">

        <div class="item-left">
          <div class="info-box">
            <span class="txt">标段：</span>
            <el-select v-model="formInfo.bidSection" size="medium" class="input_width" @change="getWorkAreaList(null)">
              <el-option v-for="item in biaoduanList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </div>
          <div class="info-box">
            <span class="txt">所属工区：</span>
            <el-select
              v-model="workAreaId"
              size="medium"
              class="input_width"
              multiple
              @change="getDeviceInfo(null)"
              placeholder="请先选择标段">
              <el-option v-for="item in workAreaInfo" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </div>
          <div class="info-box">
            <span class="txt">车辆设备：</span>
            <el-select v-model="thirdPartyId" size="medium" class="input_width" multiple placeholder="请先选择工区">
              <el-option v-for="item in carDeviceList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </div>
          <div class="info-box">
            <span class="txt">车牌号码：</span>
            <el-input v-model="formInfo.number" size="medium" class="input_width" clearable placeholder="请输入" />
          </div>
          <div class="info-box">
            <span class="txt">车主姓名：</span>
            <el-input
              v-model="formInfo.name"
              :readonly="isShowBtn"
              size="medium"
              class="input_width"
              :class="[ isShowBtn ? 'car-name' : '' ]"
              :placeholder="[ isShowBtn ? '请选择' : '请输入' ]" />
            <el-button class="btn" type="primary" size="medium" v-show="isShowBtn" @click="selectStaffInfo">选择</el-button>
          </div>
        </div>

        <div class="item-reight">
          <div class="info-box">
            <span class="txt">车牌类型：</span>
            <el-select v-model="formInfo.model" size="medium" class="input_width" placeholder="请选择">
              <el-option v-for="item in plateNumberList" :key="item.id" :label="item.text" :value="item.id" />
            </el-select>
          </div>
          <div class="info-box">
            <span class="txt">车辆类型：</span>
            <el-select v-model="formInfo.brand" size="medium" class="input_width" placeholder="请选择">
              <el-option v-for="item in carTypeList" :key="item.id" :label="item.text" :value="item.id" />
            </el-select>
          </div>
          <div class="info-box">
            <span class="txt">车牌颜色：</span>
            <el-select v-model="formInfo.brandColor" size="medium" class="input_width" placeholder="请选择">
              <el-option v-for="item in plateNumberColorList" :key="item.id" :label="item.text" :value="item.id" />
            </el-select>
          </div>
          <div class="info-box">
            <span class="txt">车辆颜色：</span>
            <el-select v-model="formInfo.carColor" size="medium" class="input_width" placeholder="请选择">
              <el-option v-for="item in carColorList" :key="item.id" :label="item.text" :value="item.id" />
            </el-select>
          </div>
        </div>
      </div>
    </div>

    <SelectStaffInfo ref="SelectStaffInfoRef" @staffInfo="getStaffInfo" />
  </div>
</template>

<script>
import SelectStaffInfo from "../components/car-run/module/SelectStaffInfo";
import HttpInterface from "../../util/httpInterface";
import constants from "../../util/constants";
import { mapActions, mapState } from "vuex";
import eventBus from "../../util/eventBus";

export default {
  components: { SelectStaffInfo },
  data() {
    return {
      title: "添加车辆信息",
      isShowBtn: false,  // 单租户为false
      formInfo: {
        number: "",
        name: "",
        brand: "1",
        carColor: "1",
        bidSection: "",
        model: "0",
        brandColor: "0",
      },
      carColorList: constants.VEHICLE_COLOR,
      carTypeList: constants.VEHICLE_TYPE,
      plateNumberList: constants.PLATE_NUMBER_TYPE,
      plateNumberColorList: constants.PLATE_NUMBER_COLOR,
      carDeviceList: [],
      workAreaInfo: [],
      workAreaId: [],
      thirdPartyId: [],
    };
  },

  computed: {
    ...mapState(["biaoduanList"])
  },

  methods: {
    ...mapActions(["selectByBidSection"]),

    // 根据标段 查 工区列表
    getWorkAreaList(workAreaId) {
      let that = this;
      if (!workAreaId) this.workAreaId = [];

      this.selectByBidSection({
        bidSection: this.formInfo.bidSection,
        fn: function (data) {
          if (that.formInfo.bidSection) {
            that.workAreaInfo = data;
          } else {
            that.workAreaInfo = [];
          }
          if (workAreaId) that.getDeviceInfo(workAreaId);
        }
      })
    },

    // 根据工区 查 车辆设备
    getDeviceInfo(workAreaId) {
      if (!workAreaId) this.thirdPartyId = [];
      let params = {
        areaIds: this.workAreaId
      };
      HttpInterface.requestPost(this, HttpInterface.URL_VEHICLE_FIND_BY_AREAIDS, params, res => {
        let { other } = res.data;
        this.carDeviceList = other;
      }, null, false)
    },

    returnPreviousPage() {
      this.$parent.subPage = 0;
      this.$parent.getListInfo();
    },

    verifyFormInfo () {
      let { number, name, bidSection } = this.formInfo;

      if (!bidSection) return this.warningMessage("请选择标段");

      if (this.workAreaId.length == 0) return this.warningMessage("请选择所属工区");

      if (this.thirdPartyId.length == 0) {
        this.warningMessage("请选择车辆设备");
        return false;
      }

      if (!number) return this.warningMessage("请输入车牌号码");

      if (this.isShowBtn) {
        if (!name) return this.warningMessage("请选择车主姓名");
      } else {
        if (!name) return this.warningMessage("请输入车主姓名");
      }
      return true;
    },

    // 添加信息
    submitFormInfo () {
      if (!this.verifyFormInfo()) return;
      let that = this;
      let arr = [], arr1 = [];
      let { id, bidSection } = this.formInfo;
      let { workAreaId, workAreaInfo, thirdPartyId, carDeviceList } = this;
      let parmas = this.formInfo;
      workAreaId.forEach(item => {
        workAreaInfo.forEach(key => {
          if (item == key.id) arr.push({ id: key.id, name: key.name });
        })
      })
      thirdPartyId.forEach(item => {
        carDeviceList.forEach(key => {
          if (item == key.id) arr1.push({ id: key.id, name: key.name });
        })
      })
      parmas.workAreaList = arr;
      parmas.thirdPartyVehicleList = arr1;
      let url = id ? HttpInterface.URL_VEHICLE_EDIT : HttpInterface.URL_VEHICLE_ADD;
      HttpInterface.requestPost(this, url, parmas, function (response) {
        var { success } = response.data;
        if (success) {
          that.$parent.subPage = 0;
          let data = {
            bidSection,
            thirdPartyId: thirdPartyId[0],
            areaId: workAreaId[0]
          };
          eventBus.$emit("getListInfo", data);
          that.successMessage('操作成功！');
        } else {
          that.errorMessage('操作失败！');
        }
      }, null, false)
    },

    selectStaffInfo() {
      this.$refs.SelectStaffInfoRef.show(this.thirdPartyId[0]);
    },

    getStaffInfo(row) {
      this.formInfo.name = row.personName;
      this.formInfo.personId = row.personId;
    },

    show(row) {
      this.formInfo = {
        number: "",
        name: "",
        brand: "1",
        carColor: "1",
        model: "0",
        brandColor: "0",
        bidSection: this.biaoduanList[0].id,
      };
      this.thirdPartyId = [];
      this.workAreaId = [];
      if (row != undefined) {
        this.title = "编辑车辆信息";
        row.workAreaList.forEach(item => {
          this.workAreaId.push(item.id)
        })
        row.thirdPartyVehicleList.forEach(item => {
          this.thirdPartyId.push(item.id)
        })
        this.formInfo = row;
      } else {
        this.title = "添加车辆信息";
      }
      this.getWorkAreaList(this.workAreaId);
    }
  }
};
</script>

<style scoped lang="scss">
.content_padding{
  margin-top: 80px;

  .device_info{
    padding: 0 20px;
    box-sizing: border-box;
    margin-top: 30px;

    .config_info{
      margin: 30px 0 0 20px;
    }

    .basic_info{
      display: flex;
      margin-top: 26px;
      flex-wrap: wrap;
      justify-content: space-evenly;

      &:after{
        content: "";
        width: 478px;
      }
    }

    .title{
      width: 100%;
      font-weight: bold;
      line-height: 50px;
      display: inline-block;
      border-bottom: 1px solid rgb(236, 236, 236);
    }
  }
}

.info-box{
  margin: 20px 60px;
  display: flex;
  align-items: center;

  .txt{
    font-size: 14px;
    width: 76px;
    display: inline-block;
    text-align: right;
    margin-right: 8px;
  }

  .car-name{
    width: 182px;
  }

  .btn{
    margin-left: 10px;
  }
}

.info_top{
  margin-top: 20px;
}

.text_width{
  width: 126px;
  display: inline-block;
  text-align: right;
}

.input_width{
  width: 260px;
}

.el-button--text >>> .iconfanhui{
  margin-right: 4px;
  font-size: 18px;
  vertical-align: -2px;
}

.selector_width{
  width: 220px;
}

.el-button.is-circle{
  border-radius: 50% !important;
}
</style>
